<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 01 快速入门</title>
</head>
<body>

<!--老师解读
1. div元素不是必须的，也可以是其它元素，比如span,但是约定都是将vue实例挂载到div
2. 因为div更加适合做布局
3. id 不是必须为app , 是程序员指定,一般我们就使用app
-->

<div id="app">
    <!--老师解读
        1. {{message}} : 插值表达式
        2. message 就是从model的data数据池来设置
        3. 当我们的代码执行时，会到data{} 数据池中去匹配数据, 如果匹配上, 就进行替换, 如果没有匹配上, 就是输出空
    -->
    <h1>欢迎你{{message}}-{{name}}</h1>
</div>

<!--引入vue.js-->
<script src="./js/vue.js"></script>
<!--注意代码顺序，要求 div 在前，script 在后，否则无法绑定数据-->
<script>
    //创建vue对象
    let vm = new Vue({
        el:"#app", //创建的vue实例挂载到id=app的div
        //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)
        data:{
            message: "Hello-Vue!",
            name: "韩顺平教育"
        }
    })
    console.log("vm=>", vm);
    console.log(vm._data.message);
    console.log(vm._data.name);
    console.log(vm.name);
    console.log(vm.message);
</script>


</body>
</html>